import React from 'react';
import './IndexPage.css'
// import axios from '../../util/http'
import axios from 'axios'
import * as url from '../../util/api'

var echarts = require('echarts');

class IndexPage extends React.Component {
    constructor(){
        super();
        this.state={
            echartsData:{   //图表数据
                orderNum:[],      //订单数
                orderMoney:[],      //订单金额
                orderPersonNum:[],      //客户下单数
                getMoney:[],      //收款数
                areaMoney:{      //区域销售数
                    area:[],   //区域
                    money:[],   //金额
                },
            }
        }
    }
    //本周、上周、本月、上月
    jiSuan=(data)=>{
        let toYesterday=(data[6]-data[5]).toString();
        let thisWeek=0;
        let lastWeek=123;
        let thisMonth=0;
        let lastMonth=271;
        data.forEach(item=>{
            thisWeek+=item;
        });
        thisMonth=thisWeek*4;
        return {toYesterday,thisWeek,lastWeek,thisMonth,lastMonth}
    };
    render() {
        return (
            <div className='indexChartBox'>
                <div className='colBox' style={{width:'49.5%'}}>
                    <div>订单数</div>
                    <div>
                        <div style={{width:'80%'}} id='orderNumBox'/>
                        <div style={{width:'21%'}}>
                            <table>
                                <tbody>
                                <tr>
                                    <td>今日</td>
                                    {/*<td>{this.state.echartsData.orderNum[6]}</td>*/}
                                </tr>
                                <tr>
                                    <td>比昨天</td>
                                    <td>{(this.jiSuan(this.state.echartsData.orderNum).toYesterday).toString()}</td>
                                </tr>
                                </tbody>
                            </table>
                            <table>
                                <tbody>
                                <tr>
                                    <td>本周</td>
                                    <td>{this.jiSuan(this.state.echartsData.orderNum).thisWeek}</td>
                                </tr>
                                <tr>
                                    <td>比上周</td>
                                    <td>{(this.jiSuan(this.state.echartsData.orderNum).thisWeek-this.jiSuan(this.state.echartsData.orderNum).lastWeek).toString()}</td>
                                </tr>
                                </tbody>
                            </table>
                            <table>
                                <tbody>
                                <tr>
                                    <td>本月</td>
                                    <td>{this.jiSuan(this.state.echartsData.orderNum).thisMonth}</td>
                                </tr>
                                <tr>
                                    <td>比上月</td>
                                    <td>{(this.jiSuan(this.state.echartsData.orderNum).thisMonth-this.jiSuan(this.state.echartsData.orderNum).lastMonth).toString()}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div className='colBox' style={{width:'49.5%'}}>
                    <div>订单金额</div>
                    <div>
                        <div style={{width:'80%'}} id='orderMoneyBox'/>
                        <div style={{width:'21%'}}>
                            <table>
                                <tbody>
                                <tr>
                                    <td>今日</td>
                                    <td>{this.state.echartsData.orderMoney[6]}</td>
                                </tr>
                                <tr>
                                    <td>比昨天</td>
                                    <td>{this.jiSuan(this.state.echartsData.orderMoney).toYesterday}</td>
                                </tr>
                                </tbody>
                            </table>
                            <table>
                                <tbody>
                                <tr>
                                    <td>本周</td>
                                    <td>{this.jiSuan(this.state.echartsData.orderMoney).thisWeek}</td>
                                </tr>
                                <tr>
                                    <td>比上周</td>
                                    <td>{(this.jiSuan(this.state.echartsData.orderMoney).thisWeek-this.jiSuan(this.state.echartsData.orderMoney).lastWeek).toString()}</td>
                                </tr>
                                </tbody>
                            </table>
                            <table>
                                <tbody>
                                <tr>
                                    <td>本月</td>
                                    <td>{this.jiSuan(this.state.echartsData.orderMoney).thisMonth}</td>
                                </tr>
                                <tr>
                                    <td>比上月</td>
                                    <td>{(this.jiSuan(this.state.echartsData.orderMoney).thisMonth-this.jiSuan(this.state.echartsData.orderMoney).lastMonth).toString()}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div className='colBox' style={{width:'49.5%'}}>
                    <div>下单客户数</div>
                    <div>
                        <div style={{width:'80%'}} id='orderPersonBox'/>
                        <div style={{width:'21%'}}>
                            <table>
                                <tbody>
                                <tr>
                                    <td>今日</td>
                                    <td>{this.state.echartsData.orderPersonNum[6]}</td>
                                </tr>
                                <tr>
                                    <td>比昨天</td>
                                    <td>{this.jiSuan(this.state.echartsData.orderPersonNum).toYesterday}</td>
                                </tr>
                                </tbody>
                            </table>
                            <table>
                                <tbody>
                                <tr>
                                    <td>本周</td>
                                    <td>{this.jiSuan(this.state.echartsData.orderPersonNum).thisWeek}</td>
                                </tr>
                                <tr>
                                    <td>比上周</td>
                                    <td>{(this.jiSuan(this.state.echartsData.orderPersonNum).thisWeek-this.jiSuan(this.state.echartsData.orderPersonNum).lastWeek).toString()}</td>
                                </tr>
                                </tbody>
                            </table>
                            <table>
                                <tbody>
                                <tr>
                                    <td>本月</td>
                                    <td>{this.jiSuan(this.state.echartsData.orderPersonNum).thisMonth}</td>
                                </tr>
                                <tr>
                                    <td>比上月</td>
                                    <td>{(this.jiSuan(this.state.echartsData.orderPersonNum).thisMonth-this.jiSuan(this.state.echartsData.orderPersonNum).lastMonth).toString()}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div className='colBox' style={{width:'49.5%'}}>
                    <div>收款金额</div>
                    <div>
                        <div style={{width:'80%'}} id='getMoneyBox'/>
                        <div style={{width:'21%'}}>
                            <table>
                                <tbody>
                                <tr>
                                    <td>今日</td>
                                    <td>{this.state.echartsData.getMoney[6]}</td>
                                </tr>
                                <tr>
                                    <td>比昨天</td>
                                    <td>{this.jiSuan(this.state.echartsData.getMoney).toYesterday}</td>
                                </tr>
                                </tbody>
                            </table>
                            <table>
                                <tbody>
                                <tr>
                                    <td>本周</td>
                                    <td>{this.jiSuan(this.state.echartsData.getMoney).thisWeek}</td>
                                </tr>
                                <tr>
                                    <td>比上周</td>
                                    <td>{(this.jiSuan(this.state.echartsData.getMoney).thisWeek-this.jiSuan(this.state.echartsData.getMoney).lastWeek).toString()}</td>
                                </tr>
                                </tbody>
                            </table>
                            <table>
                                <tbody>
                                <tr>
                                    <td>本月</td>
                                    <td>{this.jiSuan(this.state.echartsData.getMoney).thisMonth}</td>
                                </tr>
                                <tr>
                                    <td>比上月</td>
                                    <td>{(this.jiSuan(this.state.echartsData.getMoney).thisMonth-this.jiSuan(this.state.echartsData.getMoney).lastMonth).toString()}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div className='colBox' style={{width:'49.5%'}}>
                    <div>区域销售分布图</div>
                    <div>
                        <div style={{width:'100%'}} id='areaBox'/>
                    </div>
                </div>
            </div>
        );
    }
    componentDidMount() {
        axios({
            url:url.getIndexData,
            method:'post',
            data:'',
        }).then(res=>{
            // console.log(res);
            this.setState({
                echartsData:res.data
            });
            /*-----------------------图表数据---------------------*/
            //订单数
            let orderNumChart = echarts.init(document.getElementById('orderNumBox'));
            orderNumChart.setOption({
                tooltip: {   //显示的标线
                    show:'true',
                    trigger:'axis',
                    formatter:'订单数 : {c}',
                    extraCssText:'width:100px;height:30px;'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['4.29', '4.30', '5.1', '5.2', '5.3', '5.4', '5.5']
                },
                yAxis: {
                    type: 'value',
                },
                grid:{
                    left:'15%',
                    right:'5%',
                    top:'5%',
                    bottom:'23%',
                },
                series: [{
                    data: this.state.echartsData.orderNum,
                    type: 'line',
                    areaStyle: {}
                }]
            });
            orderNumChart.on('finished', function () {    //手动解决自适应栅格宽度
                orderNumChart.resize();
            });
            // 订单金额
            let orderMoneyChart = echarts.init(document.getElementById('orderMoneyBox'));
            orderMoneyChart.setOption({
                tooltip: {   //显示的标线
                    show:'true',
                    trigger:'axis',
                    formatter:'订单金额 : {c}',
                    extraCssText:'width:120px;height:30px;'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['4.29', '4.30', '5.1', '5.2', '5.3', '5.4', '5.5']
                },
                yAxis: {
                    type: 'value',
                },
                grid:{
                    left:'15%',
                    right:'5%',
                    top:'5%',
                    bottom:'23%',
                },
                series: [{
                    data: this.state.echartsData.orderMoney,
                    type: 'line',
                    areaStyle: {},
                    itemStyle:{
                        normal:{
                            color: "#03b8cc" //图表颜色
                        }
                    }
                }]
            });
            orderMoneyChart.on('finished', function () {    //手动解决自适应栅格宽度
                orderMoneyChart.resize();
            });
            // 下单客户数
            let orderPersonChart = echarts.init(document.getElementById('orderPersonBox'));
            orderPersonChart.setOption({
                tooltip: {   //显示的标线
                    show:'true',
                    trigger:'axis',
                    formatter:'下单客户数 : {c}',
                    extraCssText:'width:120px;height:30px;'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['4.29', '4.30', '5.1', '5.2', '5.3', '5.4', '5.5']
                },
                yAxis: {
                    type: 'value',
                },
                grid:{
                    left:'15%',
                    right:'5%',
                    top:'5%',
                    bottom:'23%',
                },
                series: [{
                    data: this.state.echartsData.orderPersonNum,
                    type: 'line',
                    areaStyle: {}
                }]
            });
            orderPersonChart.on('finished', function () {    //手动解决自适应栅格宽度
                orderPersonChart.resize();
            });
            // 收款金额
            let getMoneyChart = echarts.init(document.getElementById('getMoneyBox'));
            getMoneyChart.setOption({
                tooltip: {   //显示的标线
                    show:'true',
                    trigger:'axis',
                    formatter:'收款金额 : {c}',
                    extraCssText:'width:120px;height:30px;'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['4.29', '4.30', '5.1', '5.2', '5.3', '5.4', '5.5']
                },
                yAxis: {
                    type: 'value',
                },
                grid:{
                    left:'15%',
                    right:'5%',
                    top:'5%',
                    bottom:'23%',
                },
                series: [{
                    data: this.state.echartsData.getMoney,
                    type: 'line',
                    areaStyle: {},
                    itemStyle:{
                        normal:{
                            color: "#03b8cc" //图表颜色
                        }
                    }
                }]
            });
            getMoneyChart.on('finished', function () {    //手动解决自适应栅格宽度
                getMoneyChart.resize();
            });
            // 区域销售分布图
            let areaChart = echarts.init(document.getElementById('areaBox'));
            areaChart.setOption({
                tooltip: {   //显示的标线
                    show:'true',
                    trigger:'axis',
                    formatter:'订单数: {c}',
                    extraCssText:'width:120px;height:30px;'
                },
                xAxis: {
                    data: this.state.echartsData.areaMoney.area
                },
                yAxis: {},
                grid:{
                    left:'15%',
                    right:'5%',
                    top:'5%',
                    bottom:'23%',
                },
                series: [{
                    type: 'bar',
                    data: this.state.echartsData.areaMoney.money,
                    itemStyle:{
                        normal:{
                            color: "#03b8cc" //图表颜色
                        }
                    }
                }]
            });
            areaChart.on('finished', function () {    //手动解决自适应栅格宽度
                areaChart.resize();
            });
        });


    }
}

export default IndexPage;